<script setup>
  import contentL from './components/content-L.vue'
  import contentR from './components/content-R.vue'
  import { ref  } from 'vue';
  
  const checkList = ref([])
  const upupD = (r)=>{
    console.log(r);
    checkList.value = r.filter(v=>v.onSale === true);
  
  }


</script>

<template>
  
<div class="content">
  <contentL @upupDate="upupD" />
  <contentR>
    <template #default>
      <ul>
        <li v-for="item in checkList">{{item['p-name']}}</li>
      </ul>      
    </template>

  </contentR>

</div>
</template>

<style scoped lang="scss">
    body{
     width: 100%;
     height: 100%;
      .content{
        display: flex;
        li:hover {border-bottom: 1px solid red;}
        .L,.R{
          flex: 1;
          border: 1px solid gray;
          margin: 0 10px;
          box-shadow: 0 0 3px gray;
          padding: 5px;
          border-radius: 5px;
            ul li {
            border-bottom: 1px solid gray;
          }
        }
      }
    }
</style>
